<div class="card mb-3">
  <div class="card-header">自定义按钮</div>
  <div class="card-body">
    <p>示例只是针对当前UEditor实例，如果想所有实例都通用，可以尝试在 Module 中注册。</p>
    <div class="row">
      <div class="col-sm-6">
        <textarea highlight-js>
&lt;ueditor [(ngModel)]="custom_source"
            (onPreReady)="onPreReady($event)"
            [config]="custom">
&lt;/ueditor></textarea>
        <textarea highlight-js>
onPreReady(comp: UEditorComponent) {
    UE.registerUI('button', function(editor, uiName) {
        //注册按钮执行时的command命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
            execCommand: function() {
                alert('execCommand:' + uiName)
            }
        });
        //创建一个button
        var btn = new UE.ui.Button({
            //按钮的名字
            name: uiName,
            //提示
            title: uiName,
            //添加额外样式，指定icon图标，这里默认使用一个重复的icon
            cssRules: 'background-position: -500px 0;',
            //点击时执行的命令
            onclick: function() {
                //这里可以不用执行命令,做你自己的操作也可
                editor.execCommand(uiName);
            }
        });
        //当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function() {
            var state = editor.queryCommandState(uiName);
            if (state == -1) {
                btn.setDisabled(true);
                btn.setChecked(false);
            } else {
                btn.setDisabled(false);
                btn.setChecked(state);
            }
        });
        //因为你是添加button,所以需要返回这个button
        return btn;
    }, 5, comp.id);
    // comp.id 是指当前UEditor实例Id
}
                </textarea>
      </div>
      <div class="col-sm-6">
        <ueditor [(ngModel)]="custom_source" (onPreReady)="onPreReady($event)" [config]="custom"></ueditor>
        <div class="card card-outline-secondary mt-3">
          <div class="card-body">
            <blockquote class="card-bodyquote" [innerHTML]="custom_source"></blockquote>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
